<template>
    <div class="mar-x-15 mar-t-80 mar-b-80">
        <div v-for="(item, index) in data" :key="index" class="bg-white border-rad-10 mar-t-20 pad-20">
            <h4>{{ item.title }}</h4>
            
            <draggable :list="item.list" @end="onDragEnd" group="list" class="flex align-center mar-t-10">
                <div
                    v-for="(j, h) in item.list"
                    :key="h"
                    class="text-center mar-r-40 cur-pointer"
                    @click="skipToPage(j)"
                >
                    <SvgIcons
                        :iconClass="j.icon"
                        :style="{
                            fontSize: j.iconSize + 'px',
                        }"
                    />
                    <span class="dis-block mar-t-5 font-14">{{ j.title }}</span>
                </div>
            </draggable>
        </div>
    </div>
</template>

<script>
    import draggable from 'vuedraggable'
    import SvgIcons from "@/components/SvgIcons"
    import Utils from '@/utils/utils'

    export default {
        name: 'Archives',

        components: {
            draggable,
            SvgIcons,
        },

        data() {
            return {
                title: '这个页面是测试用的，不要删除',
                data: [
                    {
                        title: '商品',
                        list: [
                            { title: '商品类别', icon: 'icon-shoucang', iconSize: 40, path: '/goodsManage/goodsType', name: 'GoodsType', fatherPath: "/archives", sort: 1 },
                            { title: '商品品牌', icon: 'icon-shoucang', iconSize: 40, path: '/goodsManage/goodsBrand', name: 'GoodsType', fatherPath: "/archives", sort: 2 },
                            { title: '商品单位', icon: 'icon-shoucang', iconSize: 40, sort: 3 },
                            { title: '商品信息', icon: 'icon-shoucang', iconSize: 40, sort: 4 },
                            { title: '上云申请', icon: 'icon-shoucang', iconSize: 40, sort: 5 },
                            { title: '云商品信息', icon: 'icon-shoucang', iconSize: 40, sort: 6 },
                        ],
                    }, {
                        title: '客户',
                        list: [
                            { title: '客户档案', icon: 'icon-shoucang', iconSize: 40, sort: 1 },
                            { title: '收货地址', icon: 'icon-shoucang', iconSize: 40, sort: 2 },
                        ],
                    }, {
                        title: '配送',
                        list: [
                            { title: '车辆管理', icon: 'icon-shoucang', iconSize: 40, sort: 1 },
                            { title: '流程订单', icon: 'icon-shoucang', iconSize: 40, sort: 2 },
                        ],
                    }, {
                        title: '仓库',
                        list: [
                            { title: '仓库信息', icon: 'icon-shoucang', iconSize: 40, sort: 1 },
                            { title: '库存库位', icon: 'icon-shoucang', iconSize: 40, sort: 2 },
                        ],
                    }, {
                        title: '更多',
                        list: [
                            { title: '商品绑定', icon: 'icon-shoucang', iconSize: 40, sort: 1 },
                            { title: '商品组合价', icon: 'icon-shoucang', iconSize: 40, sort: 2 },
                            { title: '商品校验', icon: 'icon-shoucang', iconSize: 40, sort: 3 },
                            { title: '批量改价', icon: 'icon-shoucang', iconSize: 40, sort: 4 },
                        ],
                    },
                ],
            }
        },

        methods: {
            onDragEnd(event) {
                // Handle drag end event if needed
                console.log('Drag ended:', event)
            },

            addCategory() {
                const newCategory = {
                    name: `新类别 ${this.data.length + 1}`,
                    list: [],
                }

                this.data.push(newCategory)
            },

            // 跳转到页面
            skipToPage(row) {
                if (!row.path) {
                    Utils.popUpMsg('warning', '页面不存在！', 1000)
                    return
                }
                
                this.$router.push(row.path)
                this.$store.commit('lib/setTagList', row)
            }
        },
    }
</script>